---
title: <media-playback-rate-button>
description: Media Playback Rate Button
layout: ../../../../layouts/ComponentLayout.astro
source: https://github.com/muxinc/media-chrome/tree/main/src/js/media-playback-rate-button.js
---

import SandpackContainer from "../../../../components/SandpackContainer.astro";

The `<media-playback-rate-button>` component is used to change the playback speed of your media.

The contents and behavior of the `<media-playback-rate-button>` will update automatically
whenever the playback rate of the media changes.

## Default usage

<SandpackContainer
  html={`<media-controller>
  <video
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    playsinline
    muted
  ></video>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-playback-rate-button></media-playback-rate-button>
  </media-control-bar>
</media-controller>`}
/>

## Customize rates

The playback rates that will be cycled through when clicking can be configured using the `rates` attribute. These will automatically start at whatever the current playback rate is and then cycle from slower to faster rates and then loop back to the slowest rate.

<SandpackContainer
  html={`<media-controller>
  <video
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    playsinline
    muted
  ></video>
  <media-control-bar>
    <media-play-button></media-play-button>
    <!-- Note that the order here doesn't impact the "cycle" order when clicking. -->
    <media-playback-rate-button rates="1.5 0.25 1 0.5 0.75 2"></media-playback-rate-button>
  </media-control-bar>
</media-controller>`}
/>

## Styling with attributes

The `<media-playback-rate-button>` is updated with Media UI Attributes any time the playback rate changes.

You can use this to style the button. In this example, we change the primary (text) color based on how fast or slow the current `mediaplaybackrate` rate is.

<SandpackContainer
active="css"
css={`media-playback-rate-button[mediaplaybackrate="0"] {
    --media-primary-color: red;
}

media-playback-rate-button[mediaplaybackrate^="0."] {
    --media-primary-color: yellow;
}

media-playback-rate-button:is([mediaplaybackrate^="2"], [mediaplaybackrate^="1."]) {
    --media-primary-color: green;
}`}
  html={`<media-controller>
  <video
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    playsinline
    muted
  ></video>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-playback-rate-button rates="0 0.5 1 1.5 2"></media-playback-rate-button>
  </media-control-bar>
</media-controller>`}
/>
